<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
	<meta charset="UTF-8">
	<link rel="shortcut icon" th:href="@{/fav.ico}">
	<link rel="stylesheet" th:href="@{/css/iconfont.css}">
	<link rel="stylesheet" th:href="@{/css/global.css}">
	<link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
	<link rel="stylesheet" th:href="@{/css/bootstrap-theme.min.css}">
	<link rel="stylesheet" th:href="@{/css/swiper.min.css}">
	<link rel="stylesheet" th:href="@{/css/styles.css}">
	<script th:src="@{/js/jquery.1.12.4.min.js}" charset="UTF-8"></script>
	<script th:src="@{/js/bootstrap.min.js}" charset="UTF-8"></script>
	<script th:src="@{/js/swiper.min.js}" charset="UTF-8"></script>
	<script th:src="@{/js/global.js}" charset="UTF-8"></script>
	<script th:src="@{/js/jquery.DJMask.2.1.1.js}" charset="UTF-8"></script>
	<script th:src="@{/js/login.js}" charset="UTF-8"></script>
	<title>修改密码</title>
</head>
<body style="height: 330px">

	<div class="user-content__box clearfix bgf step1">
		<div class="title">个人中心-修改登陆密码</div>
		<div class="modify_div">
			<div class="clearfix">
				<a id="start_modify" role="button" class="but">修改登陆密码</a>
<!--				<a href="login.html?p=resetpwd" role="button" class="but">忘记登陆密码</a>-->
			</div>
			<div class="help-block">随时都能更改密码，保障您账户的安全</div>
		</div>
	</div>
	<div class="user-content__box clearfix bgf step2" style="display: none">
		<div class="title">个人中心-修改登陆密码</div>
		<div class="step-flow-box">
			<div class="step-flow__bd">
				<div class="step-flow__li step-flow__li_done">
					<div class="step-flow__state"><i class="iconfont icon-ok"></i></div>
					<p class="step-flow__title-top">输入旧密码</p>
				</div>
				<div class="step-flow__line step-flow__line_ing">
					<div class="step-flow__process"></div>
				</div>
				<div class="step-flow__li">
					<div class="step-flow__state"><i class="iconfont icon-ok"></i></div>
					<p  class="step-flow__title-top">重置登陆密码</p>
				</div>
				<div class="step-flow__line">
					<div class="step-flow__process"></div>
				</div>
				<div class="step-flow__li">
					<div class="step-flow__state"><i class="iconfont icon-ok"></i></div>
					<p class="step-flow__title-top">完成</p>
				</div>
			</div>
		</div>
		<form  class="user-setting__form" role="form">
			<div class="form-group">
				<input class="form-control" id="old_input" required=""  autocomplete="off" type="password">
				<span class="tip-text">请输入原密码</span>
				<span class="see-pwd pwd-toggle" title="显示密码"><i class="glyphicon glyphicon-eye-open"></i></span>
				<span class="error_tip step2" style="top: -2px"></span>
			</div>
			<div class="user-form-group tags-box">
				<button type="button" class="btn " id="step2_btn">提交</button>
			</div>
			<script>
				$(document).ready(function(){
					$('.form-control').on('blur focus',function() {
						$(this).addClass('focus');
						$('.error_tip').empty();
						if ($(this).val() == ''){$(this).removeClass('focus')}
					});
				});
			</script>
		</form>
	</div>
	<div class="user-content__box clearfix bgf step3" style="display: none">
		<div class="title">个人中心-修改登陆密码</div>
		<div class="step-flow-box">
			<div class="step-flow__bd">
				<div class="step-flow__li step-flow__li_done">
					<div class="step-flow__state"><i class="iconfont icon-ok"></i></div>
					<p class="step-flow__title-top">输入旧密码</p>
				</div>
				<div class="step-flow__line step-flow__li_done">
					<div class="step-flow__process"></div>
				</div>
				<div class="step-flow__li step-flow__li_done">
					<div class="step-flow__state"><i class="iconfont icon-ok"></i></div>
					<p  class="step-flow__title-top">重置登陆密码</p>
				</div>
				<div class="step-flow__line step-flow__line_ing">
					<div class="step-flow__process"></div>
				</div>
				<div class="step-flow__li">
					<div class="step-flow__state"><i class="iconfont icon-ok"></i></div>
					<p class="step-flow__title-top">完成</p>
				</div>
			</div>
		</div>
		<form  class="user-setting__form" role="form">
			<div class="form-group">
				<input class="form-control" id="new_password"  required="" autocomplete="off" type="password">
				<span class="tip-text">新的密码</span>
				<span class="see-pwd pwd-toggle" title="显示密码"><i class="glyphicon glyphicon-eye-open"></i></span>
				<span class="error_tip"></span>
			</div>
			<div class="form-group">
				<div class="form-group">
					<input class="form-control" id="confirm_password" required=""  autocomplete="off" type="password">
					<span class="tip-text">再次确认新的密码</span>
					<span class="see-pwd pwd-toggle" title="显示密码"><i class="glyphicon glyphicon-eye-open"></i></span>
					<span class="error_tip step3" style="top: -2px"></span>
				</div>
			</div>
			<div class="user-form-group tags-box">
				<button type="button" class="btn" id="step3_btn">提交</button>
			</div>
			<script th:inline="javascript">
				$(document).ready(function(){
					$('.form-control').on('blur focus',function() {
						$(this).addClass('focus')
						if ($(this).val() == ''){$(this).removeClass('focus')}
					});
				});
			</script>
		</form>
	</div>
	<div class="user-content__box clearfix bgf step4" style="display: none">
		<div class="title">账户信息-修改登陆密码</div>
		<div class="step-flow-box">
			<div class="step-flow__bd">
				<div class="step-flow__li step-flow__li_done">
					<div class="step-flow__state"><i class="iconfont icon-ok"></i></div>
					<p class="step-flow__title-top">输入旧密码</p>
				</div>
				<div class="step-flow__line step-flow__li_done">
					<div class="step-flow__process"></div>
				</div>
				<div class="step-flow__li step-flow__li_done">
					<div class="step-flow__state"><i class="iconfont icon-ok"></i></div>
					<p  class="step-flow__title-top">重置登陆密码</p>
				</div>
				<div class="step-flow__line step-flow__li_done">
					<div class="step-flow__process"></div>
				</div>
				<div class="step-flow__li step-flow__li_done">
					<div class="step-flow__state"><i class="iconfont icon-ok"></i></div>
					<p class="step-flow__title-top">完成</p>
				</div>
			</div>
		</div>
		<div class="modify-success__box text-center">
			<div class="icon b-r50"><i class="iconfont icon-checked cf fz24"></i></div>
			<div class="text c6">登陆密码设置成功！</div>
		</div>
	</div>
</body>
<script th:inline="javascript">
	$('#start_modify').click(function (){
		$('div.user-content__box.clearfix.bgf.step1').css('display','none');
		$('div.user-content__box.clearfix.bgf.step2').css('display','');
	})
	$('#step2_btn').click(function (){
		$.post(
			[[${#request.getContextPath()}]]+'/user/checkPassword',
				{'oldPassword': $('#old_input').val()},
			function(result) {
				//console.log(result);
				if(result.code==0){
					$('div.user-content__box.clearfix.bgf.step2').css('display','none');
					$('div.user-content__box.clearfix.bgf.step3').css('display','');
				}else {
					$('span.error_tip.step2').html(msgtemp('<strong>原密码错误</strong> 请重新输入','alert-warning'));
				}
			},
			'json'
		);
	})
	$('#step3_btn').click(function (){
		var newPassword=$('#new_password').val();
		var confirmPassword=$('#confirm_password').val();
		if(newPassword!=confirmPassword){
			$('span.error_tip.step3').html(msgtemp('<strong>两次密码输入不一致</strong> 请重新输入','alert-warning'));
		}else{
			$.post(
				[[${#request.getContextPath()}]]+'/user/changePassword',
				{'newPassword':newPassword},
				function(result) {
					//console.log(result);
					if(result.code==0){
						$('div.user-content__box.clearfix.bgf.step3').css('display','none');
						$('div.user-content__box.clearfix.bgf.step4').css('display','');
					}else {
						$('span.error_tip.step3').html(msgtemp('<strong>更改失败</strong> 请稍后重试','alert-warning'));
					}
				},
				'json'
			);
		}
	})
</script>
</html>